<template>
    <div class="tabs">
    	  <div class="tab_link" v-for="(item,index) of tab_link" :data-id="item.id" @click="select(index)" :class="DefaultIndex === index ? 'tab_link_active':''">{{item.title}}</div>
    </div>
</template>

<script>
export default {
    name: 'HomeTab',
    data(){
      return{
        tab_link:[{
          id:'1',
          title:"推荐"
        },{
          id:'2',
          title:"活动"
        },{
          id:'3',
          title:"母婴"
        },{
          id:'4',
          title:"美妆"
        },{
          id:'5',
          title:"家居"
        },{
          id:'6',
          title:"保健"
        },{
          id:'7',
          title:"轻奢"
        }],
        DefaultIndex:0
      }
    },
    props:{
      pageId:Number
    },
    mounted(){
      console.log(this.pageId)
      this.DefaultIndex = this.pageId;
    },
    methods:{
      select(index){
        this.DefaultIndex = index;
        this.$emit('getPageId',index)
      }
    }
}

</script>

<style lang="stylus" scoped>
@import '~@/assets/css/varibles.styl'

.tabs{background:$bgColor;width:100%;display: -webkit-box;display: -webkit-flex;display: flex;height:0.9rem;line-height:0.9rem;box-sizing:border-box;border-bottom:1px solid #eee;touch-action: none;}
.tabs .tab_link{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;text-align:center;font-size:0.25rem;color:#333;}
.tabs .tab_link_active{color:#7741cf;background:url("http://a.tepin.hk/o/2018hwg/images/nav_cur.jpg") no-repeat center 0.65rem;background-size:25%;}

</style>